<script setup lang="ts">
import {ref} from 'vue'
import {NForm, NFormItem, NInput, NButton, NSpace} from 'naive-ui'

interface SearchParams {
  roleName: string
  roleCode: string
}

const props = defineProps<{
  onSearch: (params: SearchParams) => void
  onReset?: () => void
}>()

const formRef = ref(null)
const model = ref<SearchParams>({
  name: '',
  username: '',
  phone: '',
})


const handleSubmit = () => {
  props.onSearch(model.value)
}

const handleReset = () => {
  model.value = {
    name: '',
    username: '',
    phone: ''
  }
  props.onReset?.()
}
</script>

<template>
  <div class="search-form">
    <n-form
      ref="formRef"
      :model="model"
      inline
      :label-width="80"
      label-placement="left"
    >
      <n-form-item label="用户名称:" path="name">
        <n-input
          v-model:value="model.name"
          placeholder="请输入用户名称"
          clearable
        />
      </n-form-item>
      <n-form-item label="账号:" path="username">
        <n-input
          v-model:value="model.username"
          placeholder="请输入username"
          clearable
        />
      </n-form-item>
      <n-form-item label="手机号:" path="phone">
        <n-input
          v-model:value="model.phone"
          placeholder="请输入手机号"
          clearable
        />

      </n-form-item>
      <n-form-item>
        <n-space>
          <n-button type="primary" @click="handleSubmit">
            查询
          </n-button>
          <n-button @click="handleReset">
            重置
          </n-button>
        </n-space>
      </n-form-item>
    </n-form>
  </div>
</template>

<style scoped>
.search-form {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
</style>
